<template>
  <div class="app-container">
    <el-form :model="queryForm" ref="queryForm" size="small" v-show="showSearch" :inline="true" label-width="68px">
      <el-form-item label="所属景区" prop="scenicId" label-width="80px" v-show="isSuperAdmin">
        <!--        <treeselect-->
        <!--          v-model="queryForm.scenicId"-->
        <!--          :options="scenicOptions1"-->
        <!--          :show-count="true"-->
        <!--          :clearable="true"-->
        <!--          placeholder="所属景区"-->
        <!--          @select="handleTreeselectSelectEvent1"-->
        <!--        />-->
        <el-select v-model="queryForm.scenicId" placeholder="所属景区" @change="handleScenicOptionChanged1">
          <el-option v-for="scenic in scenicOptions1" :key="scenic.scenicId" :label="scenic.scenicShortName"
                     :value="scenic.scenicId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属码头" prop="wharfId" label-width="90px" v-show="isSuperAdmin">
        <el-select v-model="queryForm.wharfId" clearable placeholder="所属码头">
          <el-option v-for="wharf in wharfOptions1" :key="wharf.wharfId" :label="wharf.wharfName"
                     :value="wharf.wharfId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船只出厂ID" prop="boatIdentityId" label-width="100px">
        <el-input
          v-model="queryForm.boatIdentityId"
          placeholder="请输入船只注册ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--        <el-col :span="5">-->

      <!--        </el-col>-->
      <el-form-item label="船编号" prop="boatCode" label-width="85px">
        <el-input
          v-model="queryForm.boatCode"
          placeholder="请输入船编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="出厂日期" prop="prodDate" label-width="100px">
        <el-date-picker clearable
                        v-model="queryForm.prodDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择出厂日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label-width="10px" style="text-align: right;margin-bottom: 25px;margin-left: 20px">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:boat:remove']"
        >删除
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getBoatList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="boatList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="35" align="center"/>
      <el-table-column label="序号" type="index" align="center" width="48" fixed="left"/>
      <el-table-column label="船只ID" align="center" prop="boatId" width="60"/>
      <el-table-column label="船只出厂ID" align="center" prop="boatIdentityId" width="150"/>
      <!--      <el-table-column label="船名" align="center" prop="boatName"/>-->
      <el-table-column label="所属景区" align="center" prop="scenicShortName" width="120" :formatter="scenicShortNameFormatter"/>
      <el-table-column label="所属码头" align="center" prop="wharfName" width="100" :formatter="wharfNameFormatter"/>
      <el-table-column label="船编号" align="center" prop="boatCode" width="60"/>
      <el-table-column key="status" prop="status" label="状态" width="60" :formatter="boatStatusFormatter">
        <!--        <template slot-scope="scope">-->
        <!--          <dict-tag :options="dict.type.sys_boat_status" :value="scope.row.status"/>-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column label="出厂日期" align="center" prop="prodDate" width="95">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.prodDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电机编号1" align="center" prop="motorCode1" width="120"/>
      <el-table-column label="电机编号2" align="center" prop="motorCode2" width="120"/>
      <el-table-column label="电池编号" align="center" prop="batteryCoe" width="120"/>
      <el-table-column label="录像机编号" align="center" prop="recorderCode" width="90"/>
      <el-table-column label="累计时长" align="center" prop="accumulatedTime" :formatter="aggregateDurationFormatter"
                       width="80"/>
      <el-table-column label="累计航程" align="center" prop="accumulatedDistance" width="100"/>
      <el-table-column label="电子围栏" align="center" prop="fence" :formatter="fenceFormatter" width="85"/>
      <el-table-column label="自动航线" align="center" prop="shiplines" :formatter="shiplineFormatter" width="85"/>
      <!--      <el-table-column label="累计耗电" align="center" prop="accumulatedPowerConsumption"/>-->
      <!--      <el-table-column label="累计收入(元)" align="center" prop="accumulatedIncome"/>-->
      <el-table-column label="备注" align="center" prop="remark" />
      <!--      <el-table-column label="船只图片" align="center" prop="boatPic">-->
      <!--        <template slot-scope="scope">-->
      <!--&lt;!&ndash;          <img :src="scope.row.boatPic" alt="" style="width: 56px;">&ndash;&gt;-->
      <!--          <ImageUpload :value="scope.row.boatPic" :url="`/system/boat/uploadBoatPic/${scope.row.boatId}`" :limit="1"-->
      <!--                       @uploaded="handleBoatPicUploaded" @deleted="handleBoatPicDeleted"></ImageUpload>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:boat:edit']"
          >修改
          </el-button>
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-edit"-->
          <!--            @click="handleUpdate(scope.row)"-->
          <!--          >分配自动航线-->
          <!--          </el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:boat:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryForm.pageNum"
      :limit.sync="queryForm.pageSize"
      @pagination="getBoatList"
    />

    <!-- 添加或修改船只信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="isBoatInfoModifyDialogVisible"
      width="600px"
      append-to-body
      @close="handleBoatInfoEditDialogClose"
    >
      <el-form ref="modifyForm" :model="modifyForm" :rules="rules" label-width="90px">
        <el-form-item label="船只出厂ID" prop="boatIdentityId">
          <el-input v-model="modifyForm.boatIdentityId" disabled size="medium" style="width: 350px"/>
        </el-form-item>
        <el-form-item label="所属景区" prop="scenicId">
          <!--          <treeselect-->
          <!--            v-model="modifyForm.scenicId"-->
          <!--            :options="scenicOptions2"-->
          <!--            :show-count="true"-->
          <!--            :clearable="false"-->
          <!--            placeholder="请输入所属的景区"-->
          <!--            @select="handleTreeselectSelectEvent2"-->
          <!--            @deselect="handleTreeselectDeselectEvent2"-->
          <!--            @input="handleTreeselectInputEvent2"-->
          <!--          />-->
          <el-select v-model="modifyForm.scenicId" placeholder="所属景区" @change="handleScenicOptionChanged2">
            <el-option v-for="scenic in scenicOptions2" :key="scenic.scenicId" :label="scenic.scenicShortName"
                       :value="scenic.scenicId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属码头" prop="wharfId">
          <el-select v-model="modifyForm.wharfId" placeholder="所属码头">
            <el-option v-for="wharf in wharfOptions2" :key="wharf.wharfId" :label="wharf.wharfName"
                       :value="wharf.wharfId"></el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="船名" prop="boatName">-->
        <!--          <el-input v-model="form.boatName" placeholder="请输入船名"/>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="船编号" prop="boatCode">-->
        <!--          <el-input v-model="form.boatCode" placeholder="请输入船编号"/>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="出厂日期" prop="prodDate">-->
        <!--          <el-date-picker clearable-->
        <!--                          v-model="form.prodDate"-->
        <!--                          type="date"-->
        <!--                          value-format="yyyy-MM-dd"-->
        <!--                          placeholder="请选择出厂日期">-->
        <!--          </el-date-picker>-->
        <!--        </el-form-item>-->
        <el-form-item label="电子围栏" prop="fenceId">
          <el-select v-model="modifyForm.fenceId" placeholder="请选择电子围栏">
            <el-option
              v-for="item in fenceOptions"
              :key="item.fenceId"
              :label="item.fenceName"
              :value="item.fenceId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动航线" prop="shiplineIds">
          <el-select v-model="modifyForm.shiplineIds" multiple placeholder="请选择自动航线">
            <el-option
              v-for="item in shiplineOptions"
              :key="item.shiplineId"
              :label="item.shiplineName"
              :value="item.shiplineId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="船只图片:" prop="boatPic">
          <ImageUpload :value="modifyForm.boatPic" :url="`/system/boat/uploadBoatPic`" :limit="1"
                       @uploaded="handleBoatPicUploaded" @deleted="handleBoatPicDeleted"></ImageUpload>
        </el-form-item>
        <el-form-item label="备注" prop="remark" label-width="60px">
          <el-input v-model="modifyForm.remark" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitModifyForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getScenic, listScenic} from "@/api/system/scenic"
import {addBoat, delBoat, deleteBoatPic, getBoat, listBoat, updateBoat} from "@/api/system/boat";
import auth from "@/plugins/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getWharfListByScenicId} from "@/api/system/wharf";
import store from "@/store";

export default {
  name: "Boat",
  dicts: ['sys_boat_status'],
  components: {Treeselect},
  data() {
    let validateBoatPic = (rule, value, callback) => {
      if (this.modifyForm.boatPic.length === 0) {
        callback(new Error('船只图片必须上传'));
      } else {
        callback();
      }
    };

    let validateShiplineIds = (rule, value, callback) => {
      if (this.modifyForm.shiplineIds.length > 1) {
        callback(new Error('单个船只当前最多只允许分配一条自动航线！'));
      } else {
        callback();
      }
    };

    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 船只信息表格数据
      boatList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      isBoatInfoModifyDialogVisible: false,
      // 查询表单参数
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        boatName: null,
        boatCode: null,
        scenicId: null,
        wharfId: null,
        boatIdentityId: null,
        prodDate: null,
        motorCode: null,
        batteryCoe: null,
        accumulatedTime: null,
        accumulatedDistance: null,
        accumulatedPowerConsumption: null,
        accumulatedIncome: null,
        status: null,
      },
      // 修改表单参数
      modifyForm: {},
      // 表单校验
      rules: {
        // scenicId: [
        //   {required: true, message: "所属景区不能为空", trigger: ["blur", "change"]}
        // ],
        // wharfId: [
        //   {required: true, message: "所属码头不能为空", trigger: ["blur", "change"]}
        // ],
        // boatPic: [
        //   {validator: validateBoatPic, trigger: 'blur'}
        // ]
        shiplineIds: [
          {validator: validateShiplineIds, trigger: 'blur'}
        ]
      },
      isSuperAdmin: false,
      boatPicList: [], //单个船只的图片集合(一般只有一张图片)
      // 景区树选项
      scenicOptions1: [],
      scenicOptions2: [],
      // 码头数组1
      wharfOptions1: [],
      // 码头数组2
      wharfOptions2: [],
      shiplineOptions: [], //自动航线数组
      fenceOptions: [], //电子围栏数组
    };
  },
  created() {
  },
  mounted() {
    this.isSuperAdmin = auth.isSuperAdmin();
    console.log("this.isSuperAdmin: ", this.isSuperAdmin)

    if (this.isSuperAdmin) {
      this.getScenicList();
    } else { //非超级管理员的界面不需要显示景区列表，且默认只能查询其自己景区下的所有船只
      this.queryForm.scenicId = store.getters.scenicId;

      //查询船只信息列表
      this.getBoatList();
    }


  },
  methods: {
    /** 查询景区下拉树结构 */
    getScenicList() {
      this.queryForm.scenicId = 0; //默认选中全部景区，0即表示查询所有景区

      this.scenicOptions1 = [];
      this.scenicOptions1.push({
        scenicId: 0,
        scenicShortName: "全部景区"
      })

      this.scenicOptions2 = [];
      this.scenicOptions2.push({
        scenicId: 0,
        scenicShortName: "无"
      })

      // scenicTreeSelect().then(res => {
      listScenic().then(res => {
        let scenicList = res.data;
        if (scenicList && scenicList.length > 0) {
          this.scenicOptions1 = this.scenicOptions1.concat(scenicList);
          this.scenicOptions2 = this.scenicOptions2.concat(scenicList);
        }
        // console.log("this.scenicOptions1: ", this.scenicOptions1)

      }).catch(err => {
        console.log("getScenicList err: ", err)
      }).finally(() => {
        //查询船只信息列表
        this.getBoatList();
      });
    },
    /** 查询船只信息列表 */
    getBoatList() {
      this.loading = true;
      listBoat(this.queryForm).then(response => {
        this.boatList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.isBoatInfoModifyDialogVisible = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getBoatList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      if (this.isSuperAdmin) {
        this.queryForm.scenicId = 0;
      }
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.boatId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.boatPicList = [];

      const boatId = row.boatId || this.ids
      getBoat(boatId).then(res => {
        let data = res.data;
        this.modifyForm = data;

        this.shiplineOptions = res.shiplines;

        let fences = res.fences;
        this.fenceOptions = [];
        this.fenceOptions.push({
          fenceId: 0,
          fenceName: "无"
        })
        if (fences && fences.length > 0) {
          this.fenceOptions = this.fenceOptions.concat(fences);
        }

        if (this.modifyForm.boatPic) {
          this.boatPicList.push({
            name: this.modifyForm.boatId,
            url: this.modifyForm.boatPic
          })
        }

        getWharfListByScenicId(this.modifyForm.scenicId).then(res => {
          // console.log("getWharfListByScenicId res.data: ", res.data)
          this.wharfOptions2 = [];
          this.wharfOptions2.push({
            wharfId: 0,
            wharfName: "无"
          })
          if (res.data && res.data.length > 0) {
            this.wharfOptions2 = this.wharfOptions2.concat(res.data);
          }

          this.isBoatInfoModifyDialogVisible = true;
          this.title = "修改船只信息";
        })

      });
    },
    /** 提交按钮 */
    submitModifyForm() {
      this.$refs["modifyForm"].validate(valid => {
        if (valid) {
          if (this.modifyForm.boatId != null) {
            updateBoat(this.modifyForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.isBoatInfoModifyDialogVisible = false;
              this.getBoatList();
            });
          } else {
            addBoat(this.modifyForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.isBoatInfoModifyDialogVisible = false;
              this.getBoatList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const boatIds = row.boatId || this.ids;
      this.$modal.confirm('是否确认删除船只信息编号为"' + boatIds + '"的数据项？').then(function () {
        return delBoat(boatIds);
      }).then(() => {
        this.getBoatList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/boat/export', {
        ...this.queryForm
      }, `boat_${new Date().getTime()}.xlsx`)
    },
    boatStatusFormatter(row, column) {
      console.log("boatStatusFormatter row.status: ", row.status)
      let statusDesc = "离线";
      //获取船只状态。船只状态。可能存在的值：0=离线,1=维护,2=空闲,3=支付倒计时中,4=拼团中,5=上船倒计时中,6=开锁等待中,7=手动驾驶中,8=自动驾驶中。
      let boatStatus = row.status;
      switch (boatStatus) {
        case 0:
          statusDesc = "离线";
          break
        case 1:
          statusDesc = "维护";
          break
        case 2:
        case 3:
        case 4:
        case 5:
        case 6:
          statusDesc = "空闲";
          break
        case 7:
          statusDesc = "手动";
          break
        case 8:
          statusDesc = "自动";
          break
      }

      return statusDesc;
    },
    aggregateDurationFormatter(row, column) {
      let accumulatedTime = row.accumulatedTime;

      return Math.floor(accumulatedTime / 60) + "min";
    },
    shiplineFormatter(row, column) {
      let shiplines = row.shiplines;
      // console.log("shiplineFormatter shiplines: ", shiplines)

      if (shiplines && shiplines.length > 0) {
        let shiplineNameArr = [];
        for (let i = 0; i < shiplines.length; i++) {
          let shiplineName = shiplines[i].shiplineName;
          if (shiplineName) {
            shiplineNameArr.push(shiplineName);
          }
        }

        if (shiplineNameArr.length > 0) {
          return shiplineNameArr.join(",");
        } else {
          return "无";
        }

      } else {
        return "无";
      }
    },
    fenceFormatter(row, column) {
      let fence = row.fence;
      // console.log("fenceFormatter fence: ", fence)

      if (fence && fence.fenceName) {
        return fence.fenceName
      } else {
        return "无";
      }
    },
    scenicShortNameFormatter(row, column) {
      let scenicShortName = row.scenicShortName;
      if (scenicShortName) {
        return scenicShortName;
      } else {
        return "无";
      }
    },
    wharfNameFormatter(row, column) {
      let wharfName = row.wharfName;
      if (wharfName) {
        return wharfName;
      } else {
        return "无";
      }
    },
    handleBoatInfoEditDialogClose() {
      console.log("handleBoatInfoEditDialogClose execute.")
      this.boatPicList = [];
      this.wharfOptions2 = [];
    },
    handleBoatPicUploaded(file) {
      // console.log("handleBoatPicUploaded: file: ", file, ", fileList: ", fileList)
      console.log("handleBoatPicUploaded: file: ", file)

      let url = file.response.url;
      console.log("handleBoatPicUploaded: url: ", url)

      if (url) {
        updateBoat({
          boatId: this.modifyForm.boatId,
          boatPic: url
        }).then(response => {
          this.$modal.msgSuccess("船只图片上传成功！");
          this.modifyForm.boatPic = url;

          // this.isBoatInfoModifyDialogVisible = false;
          // this.getBoatList();
        });
      }
    },
    handleBoatPicDeleted(file) {
      console.log("handleBoatPicDeleted: file: ", file)

      let boatId = this.modifyForm.boatId;
      let url = file.url;
      let fileName = url.substring(url.lastIndexOf('/boatPic') + 8)
      console.log("handleBoatPicDeleted boatId: ", boatId)
      console.log("handleBoatPicDeleted fileName: ", fileName)

      if (boatId && fileName) {
        deleteBoatPic({
          boatId: boatId,
          fileName
        }).then(res => {
          if (res.code === 200) {
            // this.$modal.msgSuccess("删除成功！")
            this.$modal.msgSuccess("船只图片已删除！");
            this.modifyForm.boatPic = "";
          }
        }).catch(err => {
          // this.$modal.msgError("删除失败！")
        }).finally(() => {

        })
      }
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.scenicId,
        label: node.scenicName,
        children: node.children
      };
    },
    handleTreeselectInputEvent1(value, instanceId) {
      console.log("handleTreeselectInputEvent1 execute. ", value, instanceId)

      this.wharfOptions1 = []
      this.queryForm.wharfId = null;

      if (value) {
        getWharfListByScenicId(value).then(res => {
          // console.log("getWharfListByScenicId res.data: ", res.data)
          this.wharfOptions1 = res.data;
          if (this.wharfOptions1 && this.wharfOptions1.length > 1) {
            this.wharfOptions1.unshift({
              wharfId: null,
              wharfName: "所有码头"
            })
          }

        })
      } else {

      }
    },
    handleTreeselectSelectEvent1(node, instanceId) {
      console.log("handleTreeselectSelectEvent1 execute. node: ", node, ", instanceId: ", instanceId)

      this.wharfOptions1 = []
      this.queryForm.wharfId = "";

      let scenicId = node.id;
      if (scenicId) {
        getWharfListByScenicId(scenicId).then(res => {
          // console.log("getWharfListByScenicId res.data: ", res.data)
          this.wharfOptions1 = res.data;
          if (this.wharfOptions1 && this.wharfOptions1.length > 1) {
            this.wharfOptions1.unshift({
              wharfId: null,
              wharfName: "所有码头"
            })
          }
        })
      }
    },
    handleScenicOptionChanged1() {
      console.log("handleScenicOptionChanged1 execute.")

      let scenicId = this.queryForm.scenicId;
      this.queryForm.wharfId = null;

      this.wharfOptions1 = []
      getWharfListByScenicId(scenicId).then(res => {
        let wharfList = res.data;
        if (wharfList && wharfList.length > 0) {
          this.wharfOptions1 = this.wharfOptions1.concat(wharfList);
        }
      })
    },
    handleScenicOptionChanged2() {
      let scenicId = this.modifyForm.scenicId;

      this.modifyForm.wharfId = 0;
      this.modifyForm.fenceId = 0;
      this.modifyForm.shiplineIds = [];

      this.wharfOptions2 = [];
      this.wharfOptions2.push({
        wharfId: 0,
        wharfName: "无"
      })

      this.fenceOptions = [];
      this.fenceOptions.push({
        fenceId: 0,
        fenceName: "无"
      })

      this.shiplineOptions = [];

      getScenic(scenicId).then(res => {
        let data = res.data;

        let wharfList = data.wharfList;
        if (wharfList && wharfList.length > 0) {
          this.wharfOptions2 = this.wharfOptions2.concat(wharfList);
        }

        let fenceList = data.fenceList;
        if (fenceList && fenceList.length > 0) {
          this.fenceOptions = this.fenceOptions.concat(fenceList);
        }

        let shiplineList = data.shipLineList;
        if (shiplineList && shiplineList.length > 0) {
          this.shiplineOptions = this.shiplineOptions.concat(shiplineList);
        }

      })
    },
    handleTreeselectInputEvent2(value, instanceId) {
      //如下log中value即为node节点的id，如：105,代表千岛湖景区的id
      // console.log("handleTreeselectInputEvent2 execute. ", value, instanceId)

      if (!value) {
        this.wharfOptions2 = []
        this.modifyForm.wharfId = '';
      }
    },
    handleTreeselectSelectEvent2(node, instanceId) {
      //如下log输出示例：node：id:102 label:"武汉市东湖风景区"，instanceId: 3$$
      // console.log("handleTreeselectSelectEvent2 execute. node: ", node, ", instanceId: ", instanceId)

      this.wharfOptions2 = []
      this.modifyForm.wharfId = '';

      let scenicId = node.id;
      if (scenicId) {
        //根据景区id获取码头列表
        getWharfListByScenicId(scenicId).then(res => {
          // console.log("getWharfListByScenicId res.data: ", res.data)
          this.wharfOptions2 = res.data;
        })
      }
    },
    handleTreeselectDeselectEvent2(node, instanceId) {
      console.log("handleTreeselectDeselectEvent2 execute. node: ", node, ", instanceId: ", instanceId)

    },
  }
};
</script>

<style scoped>
/*>>> .vue-treeselect {*/
/*  */
/*}*/
>>> .vue-treeselect__control {
  width: 260px;
}
</style>
